import { observable, computed, action } from 'mobx';
import { Element } from 'stores/models/core/nodeWithList';
import { stringExtendStyle } from 'common/utils/style';
import CONFIG from 'common/const/observer/image';

export default class Image extends Element {

  constructor(props) {
    super({
      ...props,
      icon: 'icon-image',
      type: 'image',
      label: '图片',
    });

    let observableProps = {};
    CONFIG.forEach(item => {
      observableProps[item.key] = item.val;
    });
    this.init({
      observableProps
    });
  }


  @computed get style() {
    return {
      width: this.width,
      height: this.height,
      top: this.top,
      left: this.left,
      borderRadius: `${this.borderRadius / 2}%`,
      backgroundColor: this.background,
      borderWidth: this.borderWidth,
      borderStyle: this.borderStyle,
      borderColor: this.borderColor,
      opacity: this.opacity / 100,
      filter: stringExtendStyle([
        {
          key: 'brightness',
          val: this.brightness,
        },
        {
          key: 'blur',
          val: this.blur,
        },
        {
          key: 'contrast',
          val: this.contrast,
        },
        {
          key: 'saturate',
          val: this.saturate,
        },
        {
          key: 'grayscale',
          val: this.grayscale,
        },
        {
          key: 'sepia',
          val: this.sepia,
        },
        {
          key: 'hueRotate',
          val: this.hueRotate,
        },
        {
          key: 'invert',
          val: this.invert,
        }

      ]),
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: this.rotate
        },
        {
          key: 'rotateX',
          val: this.rotateX
        },
        {
          key: 'rotateY',
          val: this.rotateY
        }
      ]),
    };
  }

  @action addNumber() {
    if (this.borderWidth < 10) {
      this.borderWidth = this.borderWidth + 1;
    } else {
      this.borderWidth = 10;
    }
  }

  @action decNumber() {
    if (this.borderWidth > 1) {
      this.borderWidth = this.borderWidth - 1;
    } else {
      this.borderWidth = 1;
    }
  }

  @action changeRotateX() {
    this.rotateX = this.rotateX + 180;
    if (this.rotateX === 360) {
      this.rotateX = 0;
    }
  }
  @action changeRotateY() {
    this.rotateY = this.rotateY + 180;
    if (this.rotateY === 360) {
      this.rotateY = 0;
    }
  }


}
